<template>
  <div class="hello">
    <!--前台顶部导航栏-->
    <header>
      <nav class="top">
        <span class="tel">联系电话： 0756-3832079</span>
        <ul>
          <li></li>
        </ul>
      </nav>
      <nav class="main">
        <!--防止用户禁用了css之后看不到图片，logo图片作为必不可少的元素，是一定要加载进来的-->
        <!--必不可少的图片使用<img>引入-->
        <a href="javascript:;" class="brand">
          <img src="static/image/logo@1x3.png" height="60" alt="回到首页">
        </a>
        <ul v-on:click="hightlight()">
          <li>
            <router-link :to="{ path: '/index'}"><span v-if="!activeHeader1">首页</span><span v-if="activeHeader1" style="color:#ffb300">首页</span></router-link>
          </li>
          <li>
            <router-link :to="{ path: '/index'}"><span v-if="!activeHeader1">首页</span><span v-if="activeHeader1" style="color:#ffb300">首页</span></router-link>
          </li>
          <li>
            <router-link :to="{ path: '/news'}"><span v-if="!activeHeader2">新闻资讯</span><span v-if="activeHeader2" style="color:#ffb300">新闻资讯</span></router-link>
          </li>
          <li>
            <router-link :to="{ path: '/introduce'}"><span v-if="!activeHeader3">关于学院</span><span v-if="activeHeader3" style="color:#ffb300">关于学院</span></router-link>
          </li>
        </ul>
      </nav>
    </header>

    <router-view></router-view>

    <div class="footer-wrapper">
      <div class="line-wrapper">
        <div class="line"></div>
        <div class="line-text">这个App是有底线的</div>
        <div class="line"></div>
      </div>
      <div class="footer-address">
        <div>地址：广东省珠海市唐家湾金凤路6号教师公寓12栋1楼</div>
        <div>邮箱：zhbit_kejiyuan@126.com</div>
        <div>联系电话：0756-3832079</div>
      </div>

    </div>
  </div>
</template>

<script>
  export default {
    name: 'hello',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
        activeHeader1: false,
        activeHeader2: false,
        activeHeader3: false
      }
    },
    methods: {
      // 根据路径高亮对应的菜单栏
      hightlight() {
        if (!this.$router.history.current.fullPath) {
          return {

          }
        } else {
          switch (this.$router.history.current.fullPath) {
            case '/index':
              this.activeHeader1 = true
              this.activeHeader2 = false
              this.activeHeader3 = false
              break;
            case '/news':
              this.activeHeader1 = false
              this.activeHeader2 = true
              this.activeHeader3 = false
              break;
            case '/introduce':
              this.activeHeader1 = false
              this.activeHeader2 = false
              this.activeHeader3 = true
              break;
          }
        }
      }
    },
    mounted() {
      this.$router.push({ path: '/index' })
      this.hightlight()
      // console.log(this.$router.history.current.fullPath)
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .hello {
    background-color: #F7F5F3;
  }
  /*底部栏样式*/
  
  .footer-wrapper {
    background: #fff;
    padding-top: 20px;
  }
  
  .line-wrapper {
    display: flex;
    justify-content: space-around;
    /*align-items: center;*/
    /*color: #5c5c5c;*/
    color: rgba(0, 0, 0, .3);
    /*7c7a65*/
  }
  
  .line-wrapper .line {
    width: calc(40% - 52.5px);
    /*background: red;*/
    height: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
  }
  
  .line-wrapper .line-text {
    line-height: 20px;
  }
  
  .qr-wrapper {
    display: flex;
  }
  
  .qr-wrapper div {
    width: 50%;
    text-align: center;
  }
  
  .qr-wrapper img {
    height: 120px;
  }
  
  .footer-address {
    width: 96%;
    margin: 10px auto;
    text-align: center;
    color: #5c5c5c;
  }
  /*网站头部*/
  
  header {
    width: 100%;
    position: relative;
    z-index: 20;
  }
  /*为两个导航设置样式*/
  
  header .top {
    /*行高*/
    /*这里3rem不等于30px，因为在中文版chrome浏览器中，em换算时是1em=12px，最小就是12px，不是10px*/
    line-height: 3rem;
    padding: 0 1.5rem;
    color: #fff;
    background: rgba(85, 85, 85, 0.7);
  }
  
  header .top .tel {
    float: left;
  }
  
  header .top ul {
    text-align: right;
  }
  
  header .top ul li {
    display: inline-block;
  }
  /*带边框线的连接，用的这个li+li选择器，选择的是第一个元素之后紧跟着的兄弟元素都设置这个效果*/
  
  header .top ul li+li {
    border-left: 1px solid #999;
    /*每一个li元素中间都有一点点间隙，本质是html页面存在的空白字符，可以把所有的换行符都删除掉*/
    /*可以用li不闭合之类的方法，设置负边距也行，都是有利有弊*/
    /*这个边距不一定是3px，每个浏览器都有大有小，不一定兼容，没有啥完美的解决方式...*/
    /*css4中有一个属性white-space-collapsing可以解决这个设置，但是大部分浏览器都不支持*/
    margin-left: -3px;
  }
  
  header .top ul li a {
    /*a元素是内联元素，不设置inline-block会使padding什么的不起效果*/
    display: inline-block;
    padding: 0 1.5em;
    color: #fff;
  }
  
  @media only screen and (max-width: 50em) {
    header .top ul li a {
      /*缩小这几个链接的间距*/
      padding: 0 1em;
    }
  }
  /*屏幕宽度在481像素和800像素之间*/
  
  @media only screen and (min-width: 30.0625em) and (max-width: 50em) {
    /*header .top ul li a{*/
    /*color: red;*/
    /*}*/
  }
  /*屏幕在小于等于480像素的宽度范围内*/
  /*注意如果屏幕小于480像素，第一段小于800像素的样式也会被继承，应用到页面上*/
  
  @media only screen and (max-width: 30em) {
    header .top ul li:nth-child(3),
    header .top ul li:nth-child(4) {
      /*隐藏掉了理财热线和中间的两个链接*/
      display: none;
    }
  }
  /*设置主导航样式*/
  /*这里会出现一个小bug，因为这里上面的.main中的logo使用了浮动，下面的交易信息也使用了浮动，这两块浮动发生了干扰，所以会把下面的交易信息往前面顶*/
  /*有两个解决方法，一个是清除.main导航栏的浮动，一个就是将标题logo的padding-bottom设为0*/
  
  header .main {
    padding: 0;
    /*overflow: hidden;*/
  }
  
  header .main .brand {
    float: left;
    /*padding: 1rem 1.5rem;*/
    /*padding: 1rem 1.5rem 0;*/
    padding: 0.5rem 3.5rem 0;
  }
  
  header .main ul {
    text-align: right;
  }
  
  header .main ul li {
    display: inline-block;
    border-left: 1px solid #f0ede9;
  }
  
  header .main ul li a {
    display: inline-block;
    padding: 0 2.5rem;
    line-height: 5.5rem;
    font-size: 1.6rem;
    font-weight: bold;
    color: #7c7a65;
    text-decoration: none;
  }
  
  header .main ul li a:hover,
  header .main ul li a:active,
  header .main ul li a:active {
    color: #ffb300;
    background-color: #f8f6f1;
  }
  
  @media only screen and (max-width: 50em) {
    /*让商标独占一行，然后居中*/
    /*变成block就可以把右边的导航栏给挤到下面去*/
    header .main .brand {
      float: none;
      display: block;
      padding: 0;
      margin: 1.0rem auto 0rem;
      text-align: center;
    }
    /*居中显示菜单*/
    header .main ul {
      text-align: center;
    }
    /*取消掉左边的当分隔线的边框*/
    header .main ul li {
      border: none;
    }
    /*间隔变小，别的不变*/
    header .main ul li a {
      padding: 0 1.5rem;
    }
  }
  
  @media only screen and (max-width: 30em) {
    header .main ul li {
      line-height: 2.5rem;
    }
    /*隐藏掉第一个首页链接*/
    header .main ul li:first-child {
      display: none;
    }
    /*字号变正常，间隔变小*/
    header .main ul li a {
      font-weight: normal;
      padding: 0 0.5rem;
    }
  }
  
  .clearfix:before,
  .clearfix:after {
    content: " ";
    display: table;
  }
  
  .clearfix:after {
    clear: both;
  }
</style>